<template>
    <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table
            :data="users"
            border
            style="width: 100%; margin-top: 15px;"
            >
          <el-table-column
            prop="userId"
            label="ID"
            width="100">
          </el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            width="150">
          </el-table-column>
           <el-table-column
            prop="userMobile"
            label="手机号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="userEmail"
            label="邮箱地址"
            width="100">
          </el-table-column>
           <el-table-column
            prop="userRegtime"
            label="注册时间">
          </el-table-column>
          <el-table-column
            prop="userModtime"
            label="更新时间">
          </el-table-column>
          <el-table-column label="购物车">
            <template slot-scope="scope">
            <el-button type="text" @click="dialogTable(scope.row)">查看用户购物车</el-button>

                <el-dialog title="购物车详情" :visible.sync="dialogTableVisible" :append-to-body='true'>
                  <el-table :data="gridData">
                    <el-table-column property="cartId" label="购物车序号" width="100"></el-table-column>
                    <el-table-column property="cartTime" label="创建时间"></el-table-column>
                    <el-table-column property="cartNum" label="商品个数"></el-table-column>
                    <el-table-column property="productPrice" label="商品价格"></el-table-column>
                    <el-table-column property="skuProps" label="商品详情"></el-table-column>
                  </el-table>
                </el-dialog>
            </template> 
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">

            <template slot-scope="scope">
              <el-button v-show="scope.row.userStatus==-1" @click="handleClick(scope.row)" type="text" size="small"><el-button  type="success">启用</el-button></el-button>
              <el-button v-show="scope.row.userStatus==1" @click="handClick(scope.row)" type="text" size="small"><el-button type="danger" >禁用</el-button></el-button>
            </template>
          </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center;">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="goto"
          :total="total"
          page-size=4>
        </el-pagination>
      </div>
      
    </div>
</template>
<script>
import http from "@/core/httpRequest.js";
export default {
  data() {
    return {
      users: [],
      total: 0 ,
      gridData:[],
      dialogTableVisible: false,
       gaoLiang:true,
      formLabelWidth: '120px',    
    }
  },
  mounted() {
    this.goto(1)
  },
  methods: {
    goto(page) {
      http.get(`/userList?page=`+page).then(res => {
          // this.users = res.data.data.users
          // this.total = res.data.data.total
          this.users = res.data.data.users
          this.total=res.data.data.total
          
      })
    },
   dialogTable(res){
      this.dialogTableVisible= true
      let id = res.userId
     http.get(`/shoppingCartList?userId=`+id) .then(ress =>{
           this.gridData = ress.data.data
     })
    
   },
   handleClick(res){
     let id = res.userId
     let xiaoxi =null
     http.get(`/disable?userId=`+id+`&userStatus=1`) .then(ress =>{
           xiaoxi = ress.data.message
           alert(xiaoxi)
           location.reload()
     })
   },
   handClick(res){
     let id = res.userId
     let xiaoxi =null
     http.get(`/disable?userId=`+id+`&userStatus=-1`) .then(ress =>{
           xiaoxi = ress.data.message
           alert(xiaoxi)
           location.reload()
     })
   }
  }
}
</script>

<style>
</style>